<script setup>
const searchConfig = ref({
  items: [
    {
      key: 'title',
      title: '资料分类',
    },
    {
      key: 'type',
      title: '资料内容说明',
      type: 'select',
      placeholder: '请选择',
    },
    {
      key: 'isRead',
      title: '反馈状态',
      type: 'select',
      placeholder: '请选择',
    },
  ],
  search: () => {},
  reset: () => {},
  params: {},
});
const operateOptions = [
  {
    label: '批量导入',
    value: '',
    type: 'primary',
  },
  {
    label: '批量下载',
    value: '1',
    type: 'primary',
  },
];
const columns = ref([
  {
    type: 'selection',
  },
  {
    label: '资料分类',
    prop: 'title',
  },
  {
    label: '资料内容说明',
    prop: 'type',
    options: {
      formatter: () => 'formatter',
    },
  },
  {
    label: '上级资料分类',
    prop: 'content',
    slot: 'content',
  },
  {
    label: '下发状态',
    prop: 'isRead',
  },
  {
    label: '提交人员',
    prop: 'createTime',
    width: '170px',
  },
  {
    label: '项目组角色',
    prop: 'createTime',
    width: '170px',
  },
  {
    label: '提交时间',
    prop: 'createTime',
    width: '170px',
  },
  {
    label: '更新时间',
    prop: 'createTime',
    width: '170px',
  },
  {
    type: 'option',
    minWidth: '150',
    items: [
      {
        text: '上传资料',
        icon: 'vc-icon vc-icon-table-check',
        click: () => {},
      },
      {
        text: '下载资料',
        icon: 'vc-icon vc-icon-table-check',
        click: () => {},
      },
    ],
  },
]);

const tableData = ref([
  {
    title: '123',
    type: '123',
    content: '1232222222',
    isRead: '123',
    createTime: '123',
  },
  {
    title: '123',
    type: '123',
    content: '1232222222',
    isRead: '123',
    createTime: '123',
  },
]);
const select = (selection, row) => {
  console.log('father', selection, row);
};
const selectionChange = (selection) => {
  console.log('handleSelectionChange', selection);
};
const tableEvents = {
  selectionChange,
  select,
};
const tableOptions = {
  emptyText: '暂无数据',
  border: false,
  stripe: true,
};

const pagination = {
  total: 100,
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
};

const loadTableData = (pagination) => {
  console.log('loadTableData', pagination);
};
</script>

<template>
            <div class="search-header-wrap ">
              <search-header :searchConfig="searchConfig"></search-header>
            </div>
            <basic-container>
              <div class="table-wrap">
                <basic-table
                  :operateOptions="operateOptions"
                  :columns="columns"
                  :tableOptions="tableOptions"
                  :tableEvents="tableEvents"
                  :data="tableData"
                  :pagination="pagination"
                  @loadTableData="loadTableData"
                >
                  <template #content>
                    <span>自定义插槽内容</span>
                  </template>
                </basic-table>
              </div>
            </basic-container>
</template>

<style lang="scss" scoped>
.index-home-implementation-plan {
  margin-top: 18px;

  .header {
    .header__label {
      height: 24px;
      font-size: 16px;
      font-weight: bold;
      color: #25292c;
      line-height: 24px;
      letter-spacing: 1px;
    }

    .main__search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      margin-top: 17px;
      height: 64px;
      background: #ffffff;
      border-radius: 2px;

      .main__search-department {
        padding-left: 24px;
      }
      .main__search-plan {
        width: 370px;
        padding-right: 24px;
      }
    }

    .main__table {
      margin-top: 16px;
      background: #ffffff;
      border-radius: 2px;
      padding: 15px 24px;

      .table {
        margin-top: 17px;
      }
    }
  }
}
// .demo-tabs {
//   .el-tabs__nav-scroll{
//     background: white;
//   }
// }
</style>
